<template>
  <view class="content">
    <view class="top_box">
      <view class="kong"></view>
      <view class="top1 flexs2">
        <image class="up_img"
               @click="goback"
               src="../../static/image/bs_back.png"></image>
        <view class="titles">用户签到</view>
        <view class="status">
        </view>
      </view>
      <view class="sign_btn_box">
        <view v-show="flag"
              @click="todaySign"
              class='signtext1'>已签到</view>
        <view v-show="!flag"
              @click="todaySign"
              class='signtext'>点我签到</view>
      </view>
      <view class='calendaroutbox'>
        <uni-commoncalendar :selected="List" />
      </view>
    </view>

    <view class="rank_box">
      <view class="rank_top">
        <image src="../../static/image/yhqd_img_qdpm@2x.png"
               mode=""></image>
      </view>
      <view class="rank_list">
        <view class="rank_item"
              v-for="el in SortList"
              :key="el.id">
          <view class="rank_item_l">
            <view class="rank_num1">{{el.user_id}}</view>
            <!-- <view class="rank_num2">{{54}}</view>
            <view class="rank_num3">{{32}}</view>
            <view class="rank_num">{{98}}</view> -->
            <view class="rank_avatar1">
              <image :src="$serverIp+el.avatar"
                     mode=""></image>
            </view>
            <!-- <view class="rank_avatar2">
              <image src="../../static/image/gexx_img_mrtx@2x.png"
                     mode=""></image>
            </view> -->
            <!-- <view class="rank_avatar3">
              <image src="../../static/image/gexx_img_mrtx@2x.png"
                     mode=""></image>
            </view> -->
            <!-- <view class="rank_avatar">
              <image src="../../static/image/gexx_img_mrtx@2x.png"
                     mode=""></image>
            </view> -->
            <view class="rank_info">
              <view class="rank_name">{{el.nickname}}</view>
              <view class="rank_q_num">签到{{el.num}}次</view>
            </view>
          </view>
          <view class="rank_item_r"
                v-show="el.today_sign!=0">今日已签到</view>
          <view class="rank_item_r1"
                v-show="el.today_sign==0">今日未签到</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniCommoncalendar from '@/components/uni-commoncalendar/uni-commoncalendar.vue'
export default {
  data() {
    return {
      List: [],
      SortList: [],
      flag: false
    }
  },
  //
  methods: {
    async getsignIn() {
      let { data } = await this.$http.post('/home/signIn')
      this.List = data.data.list
      var timestamp = Date.parse(new Date())
      let time = this.changeTimeFormat(timestamp)
      let arr = data.data.list.filter((el) => {
        if (time == el.date) return el
      })
      if (arr.length > 0) this.flag = true
      if (arr.length < 1) this.flag = false
    },
    async getSortSign() {
      let { data } = await this.$http.post('/home/getSortSign')
      this.SortList = data.data
    },
    changeTimeFormat(time) {
      var date = new Date(time)
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var currentDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      return date.getFullYear() + '-' + month + '-' + currentDate
      //返回格式：yyyy-MM-dd hh:mm
    },
    // /home/todaySign
    async todaySign() {
      let { data } = await this.$http.post('/home/todaySign')
      this.getsignIn()
      this.getSortSign()
      uni.showToast({ title: data.msg, icon: 'none' })
    }
  },
  onLoad() {
    this.getsignIn()
    this.getSortSign()
  }
}
</script>

<style>
.content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.top_box {
  height: 400rpx;
  /* #ifdef APP-PLUS */
  height: 470rpx;
  /* #endif */
  width: 100%;
  background-image: url(../../static/image/yhqd_img_bg@2x.png);
  background-size: 100% 100%;
}
.kong {
  width: 100%;
  height: var(--status-bar-height);
}
.top1 {
  width: 100%;
  height: 89rpx;
  padding: 26rpx;
  display: flex;
  justify-content: space-between;
}
.up_img {
  width: 20rpx;
  height: 36rpx;
}
.titles {
  font-size: 34rpx;
  color: #ffffff;
}
.sign_btn_box {
  width: 189rpx;
  height: 189rpx;
  margin: auto;
  background-image: url(../../static/image/qdao_bg.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.signtext {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fcb630;
  width: 60rpx;
  height: 189rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.signtext1 {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fcb630;
  width: 85rpx;
  height: 189rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recodebox {
  width: 120rpx;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
  color: #ffffff;
  border: 2rpx solid #ffffff;
  border-radius: 10rpx;
  position: absolute;
  top: 20rpx;
  right: 30rpx;
}
.calendaroutbox {
  width: 95%;
  height: 684rpx;
  margin: auto;
}
.rank_box {
  width: 100%;
  height: auto;
  padding: 0 31rpx;
  margin-top: 580rpx;
  /* #ifdef APP-PLUS */
  margin-top: 570rpx;
  /* #endif */
}
.rank_top {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}
.rank_top image {
  width: 381rpx;
  height: 79rpx;
}
.rank_list {
  width: 100%;
  height: auto;
}
.rank_item {
  width: 100%;
  height: 140rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}
.rank_item_l {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 100%;
}
.rank_num {
  font-size: 54rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
}
.rank_num1 {
  font-size: 54rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ff4130;
}
.rank_num2 {
  font-size: 54rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fb771c;
}
.rank_num3 {
  font-size: 54rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fcb630;
}
.rank_avatar {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  margin-left: 60rpx;
}
.rank_avatar1 {
  width: 122rpx;
  height: 118rpx;
  margin-left: 60rpx;
  background-image: url(../../static/image/qd_rank1.png);
  background-size: 100% 100%;
  padding-top: 8rpx;
  padding-left: 12rpx;
}
.rank_avatar2 {
  width: 122rpx;
  height: 118rpx;
  margin-left: 60rpx;
  background-image: url(/static/image/qd_rank2.png);
  background-size: 100% 100%;
  padding-top: 8rpx;
  padding-left: 12rpx;
}
.rank_avatar3 {
  width: 122rpx;
  height: 118rpx;
  margin-left: 60rpx;
  background-image: url(../../static/image/qd_rank3.png);
  background-size: 100% 100%;
  padding-top: 8rpx;
  padding-left: 11rpx;
}
.rank_info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  height: 80rpx;
  margin-left: 28rpx;
}
.rank_avatar image {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}
.rank_avatar1 image {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}
.rank_avatar2 image {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}
.rank_avatar3 image {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}
.rank_name {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.rank_q_num {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.rank_item_r {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.rank_item_r1 {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ff3b30;
}
</style>
